<script setup lang="ts">
import H5LotTabs from "@/components/H5/LotTabs/index.vue";
import AppLotTabs from "@/components/App/LotTabs/index.vue";
import useFetchData from "./hooks/useFetchData";
import { ref, computed } from "vue";

defineOptions({
  name: "Home",
});

const cmpts: any = {};
const modules: any = import.meta.glob("./components/*/index.vue", {
  eager: true,
});

Object.keys(modules).forEach((key) => {
  const folderName = key.match(/\/components\/([^\/]*)\//)?.[1];
  if (folderName) {
    cmpts[folderName] = modules[key].default;
  }
});

const currentCmpt = ref("ChkRes");
const { resData, fetchData } = useFetchData();

const changeTab = ({ index, name }: { index: number; name: string }) => {
  console.log(index, name);
  currentCmpt.value = name;
  // fetchData(name);
};
const { t } = useI18n();
const tabOptions = reactive([
  {
    title: t("title01"),
    name: "chkRes",
  },
  {
    title: t("title02"),
    name: "lotNews",
  },
  {
    title: t("title03"),
    name: "lckNum",
  },
  {
    title: t("title04"),
    name: "lotStats",
  },
  {
    title: t("title05"),
    name: "lotRes",
  },
]);

const activeName = computed({
  get: () => {
    return (
      currentCmpt.value.charAt(0).toLowerCase() + currentCmpt.value.slice(1)
    );
  },
  set: (newValue: string) => {
    currentCmpt.value = newValue.charAt(0).toUpperCase() + newValue.slice(1);
  },
});
</script>

<template>
  <view>
    <view class="bg-#004D8E w-full h-104">
      <!-- #ifdef H5 -->
      <H5LotTabs
        @changeTab="changeTab"
        v-model:active-name="activeName"
        :tabOptions="tabOptions"
      />
      <!-- #endif -->
       
      <!-- #ifdef APP-PLUS -->
      <AppLotTabs />
      <!-- #endif -->
      <lot-search />
    </view>
    <lot-container :tabOptions="tabOptions">
      <component :is="cmpts[currentCmpt]" :resData="resData" />
    </lot-container>
  </view>
</template>

<style lang="scss" scoped></style>
